<template>
	<view class="page-login-box">
		<view class="page-login-sidebox">
			<view class="login-logo">
				<image src="@/static/images/logo.png" mode="scaleToFill"></image>
			</view>
			<view class="login-cards">
				<uni-card>
					<view class="login-title tc f20 fwb col0">欢迎登录</view>
					<view class="mrgt20 mrgb20">
						<uni-easyinput prefixIcon="person" v-model="loginData.userName" placeholder="输入账号"></uni-easyinput>
					</view>
					<view class="">
						<uni-easyinput prefixIcon="locked" v-model="loginData.password" 
							type="password" placeholder="输入密码"></uni-easyinput>
					</view>
					<view v-if="!isWechatBrowser">
						<view class="mrgt10">
							<view class="fl mrgt5">
								<u-checkbox-group placement="row">
									<u-checkbox :checked="loginData.useCookie" @change="loginData.useCookie = !loginData.useCookie"
										label="记住密码" activeColor="#1dcd9e"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="fr fwb f16 mrgt2" style="color: #1dcd9e;" @click="_forget()">忘记密码?</view>
							<view class="clearb"></view>
						</view>
						<view class="mrgt30"><!--v-if="!isWechatBrowser"-->
							<u-button class="loginbtn"  shape="circle" text="登录" color="#1dcd9e" @click="_submit()"></u-button>
						</view>
					</view>
					<view class="mrgt20" v-else></view>
					<view class="mrgt10" v-if="isWechatBrowser">
						<u-button class="loginbtn" shape="circle" text="微信登录" color="#229d01" @click="getWchatCode()"></u-button>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pageLogin",
		data() {
			return {
				isWechatBrowser: false,
				identityType: "", // 默认学生
				identityDesc: "账号",
				loginData: {
				  "tenancyName": "",
				  "userName": "",
				  "password": "",
				  "useCookie": false,
				  "provider": null,
				  "providerKey": ""
				},
				loginWechat: {
				  "provider": null,
				  "accessCode": ""
				}
			}
		},
		async onLoad(e) {
			await this.$onLaunched
			let curIdentity = e && e.identity || ""
			// 判断是否微信浏览器
			this.isWechatBrowser = this.$tools.getBrowser().wechat || false
			// 获取微信回跳带的参数
			let params = this.$tools.getRequest()
			// 微信授权登录回调url后获取的参数
			if (params && params.code) {
				this.loginWechat.accessCode = params.code
				this.loginWechat.provider = this.valWechatMP()
				this._login()
			} else {
				// 进入登录界面将token设为空
				this.logout()
			}
			// 微信登录带回的state
			if (params && params.state) {
				curIdentity = params.state
			}
			// 只要不传type就是学生端
			if (curIdentity == 100) {
				this.identityType = curIdentity
				this.identityDesc = "身份证号"
			} else if (curIdentity == 10) {
				this.identityType = curIdentity
				this.identityDesc = "工号"
			} else {
				this.identityType = ""
				this.identityDesc = "账号"
			}
			if (this.isWechatBrowser) {
				//this.getWchatCode()
			}
		},
		methods: {
			_login() {
				this.httpPost({
					url: "/api/Authentication/External",
					params: this.loginWechat
				}).then(res => {
					if (res.success) {
						let params = res.result;
						if (params && params.accessToken) {
							this.loginToken(params.accessToken || "") //存token
							this.getUserInfo({
								obj: this, 
								callback: () => {
									// 判断跳转
									this.mxSkipToPage(true)
								}
							});
						} else {
							window.location.href = this.$config.baseUrl + '/H5/#/pages/common/login/bind?params=' + params
						}
					}
				}).catch(e => {
					// 未绑定
					if (e.data && e.data.error && e.data.error.code === 404) {
						let params = {
							provider: this.loginWechat.provider,
							providerKey: e.data.error.message
						}
						params = encodeURIComponent(JSON.stringify(params))
						window.location.href = this.$config.baseUrl + '/H5/#/pages/common/login/bind?params=' + params
					}
				})
			},
			// 获取微信公众号的code
			getWchatCode() {
				let appid = this.$config.appId
				let redirect_uri = this.$config.baseUrl + "/H5/#/pages/common/login/login?identity=" + this.identityType
				redirect_uri = encodeURIComponent(redirect_uri)
				let state = this.identityType
				let url = ""
				url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
				window.location.href = url
			},
			// 直接帐号登录时提交
			_submit() {
				if (!this.loginData.userName) {
					this.mxToast("请输入" + this.identityDesc + "!")
					return false
				} else if (!/^.{4,20}$/.test(this.loginData.password)) {
					this.mxToast('密码为4-20位字符!', { time: 2500 })
					return false
				}
				this.httpPost({
					url: "/api/Authentication/Password",
					params: this.loginData
				}).then(res => {
					this.mxHideLoading()
					if (res.success) {
						this.loginToken(res.result.accessToken || "")
						this.getUserInfo({
							obj: this,
							callback: () => {
								this.mxSkipToPage(true)
							}
						})
					}
				})
			},
			_forget() {
				this.mxToast('请联系管理员或老师重置密码!', { time: 3000 })
			}
		}
	};
	</script>

<style scoped lang="scss">
	.page-login-box {
		height: 100%;
	}
	.page-login-sidebox {
		overflow: hidden;
		padding: 0 15px;
		height: 100%;
		/* #ifndef MP-WEIXIN */
		background: url(@/static/images/login-bg-lg.jpg) right 0 no-repeat;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		background-image: linear-gradient(0deg,#179fc4,#1cbbb4);
		/* #endif */
		background-size: auto 100%;
		.login-logo {
			margin: 100px auto 10px;
			width: 574px;
			height: 61px;
			transform: scale(0.7);
			image {
				width: 100%;
				height: 100%;
			}
		}
		/deep/ .login-cards {
			.uni-card {
				margin: 0 !important;
				padding: 10px 10px !important;
				border-radius: 10px;
			}
			.uni-easyinput__content {
				border-radius: 100px;
				.uniui-person, .uniui-locked {
					font-size: 20px !important;
					color: $uni-color-base !important;
				}
				.uni-easyinput__content-input {
					font-size: 13px !important;
				}
			}
		}
	}
	@media screen and (max-width: 640px) {
	    .page-login-sidebox {
	        .login-logo {
				margin: 160rpx auto 10px;
				width: 574rpx;
				height: 61rpx;
				transform: scale(1.1);
				image {
					width: 100%;
					height: 100%;
				}
			}
			.login-cards {
				margin: 16% auto 0;
				width: 320px;
			}
	    }
	}
	@media screen and (min-width: 640px) {
		.page-login-sidebox {
			.login-logo {
				margin-right: 850px;
			}
			.login-cards {
				margin: 100px 240px 0 auto;
				width: 400px;
			}
		}
	}
</style>
